<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="95%"
    :before-close="handleClose"
  >

    <el-form :inline="true" :model="queryParam">
      <el-form-item label="关键字">
        <el-input v-model="queryParam.QueryKey" placeholder="名称/IP/MAC/版本号" />
      </el-form-item>
      <el-form-item label="所在机房">
        <el-select v-model="queryParam.RegionId" clearable placeholder="所在机房">
          <el-option v-for="item in region" :key="item.Id" :label="item.RegionName" :value="item.Id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="default" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <el-table
        ref="servers"
        :data="serverList"
        row-key="Id"
        style="width: 100%"
        @sort-change="sortChange"
      >
        <el-table-column type="index" fixed="left" :index="indexMethod" />
        <el-table-column
          prop="ServerName"
          label="服务名"
          fixed="left"
          sortable="custom"
          min-width="250"
        />
        <el-table-column
          prop="ServerIp"
          label="内网IP"
          sortable="custom"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.ServerIp + ':' + scope.row.ServerPort }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ServerGroup"
          label="服务组别"
          sortable="custom"
          width="300"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.ServerGroup }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="Region"
          label="所在机房"
          sortable="custom"
          width="100"
        />
        <el-table-column
          prop="IsContainer"
          label="承载方式"
          sortable="custom"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.IsContainer">容器</span>
            <span v-else>物理机</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ServiceState"
          label="状态"
          sortable="custom"
          width="80"
        >
          <template slot-scope="scope">
            <span :style="{ color: ServerState[scope.row.ServiceState].color }">{{ ServerState[scope.row.ServiceState].text }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ServerMac"
          label="MAC"
          sortable="custom"
          width="130"
        />
        <el-table-column
          prop="Transmits"
          label="取值范围"
          sortable="custom"
          min-width="200"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.TransmitId == 0" type="danger">未配置</el-tag>
            <template v-else>
              <p v-for="(text,index) in scope.row.TransmitList" :key="index">{{ (index + 1) + '，'+ text }}</p>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="Action"
          label="操作"
          sortable="custom"
          width="200"
        >
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                size="small"
                type="primary"
                @click="edit(scope.row)"
              >配置</el-button>
              <el-button
                v-if="scope.row.TransmitId !=0"
                size="small"
                type="danger"
                @click="deleteConfig(scope.row)"
              >删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="text-align: right;">
        <el-pagination
          :current-page="pagination.page"
          :page-size="pagination.size"
          layout="total, prev, pager, next, jumper"
          :total="pagination.total"
          @current-change="pagingChange"
        />
      </el-row>
    </el-card>
    <transmitAdd :scheme="scheme" :server="server" :visible="visibleAdd" @cancel="closeAdd" />
    <transmitSet :id="id" :scheme="scheme" :server="server" :visible="visibleSet" @cancel="closeSet" />
  </el-dialog>
</template>
<script>
import moment from 'moment'
import * as transmitApi from '@/api/transmit/transmit'
import { GetList } from '@/api/basic/region'
import { ServerState, TransmitType } from '@/config/publicDic'
import transmitAdd from './transmitAdd'
import transmitSet from './transmitSet'

export default {
  components: {
    transmitAdd,
    transmitSet
  },
  props: {
    scheme: {
      type: Object,
      default: () => new {
        Id: null,
        SystemTypeId: null,
        RpcMerId: null,
        Scheme: null,
        TransmitType: null
      }()
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '',
      id: null,
      visibleAdd: false,
      visibleSet: false,
      server: {
        ServerId: null,
        ServerName: null
      },
      TransmitType,
      ServerState,
      isLoad: false,
      pagination: {
        size: 20,
        page: 1,
        totoal: 0,
        sort: null,
        order: null
      },
      region: [],
      serverList: [],
      queryParam: {
        QueryKey: null,
        RegionId: null
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.title = '负载方案(' + this.scheme.Scheme + ')配置'
          this.loadRegion()
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    moment,
    edit(row) {
      this.server.ServerId = row.ServerId
      this.server.ServerName = row.ServerName
      if (row.TransmitId === 0) {
        this.visibleAdd = true
      } else {
        this.id = row.TransmitId
        this.visibleSet = true
      }
    },
    closeAdd(isRefresh) {
      this.visibleAdd = false
      if (isRefresh) {
        this.loadTable()
      }
    },
    closeSet(isRefresh) {
      this.visibleSet = false
      if (isRefresh) {
        this.loadTable()
      }
    },
    handleClose() {
      this.$emit('cancel', false)
    },
    deleteConfig(row) {
      const that = this
      this.$confirm('确定删除他配置?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.delete(row.TransmitId)
      })
    },
    async delete(id) {
      await transmitApi.Delete(id)
      this.$message({
        message: '删除成功！',
        type: 'success'
      })
      this.loadTable()
    },
    reset() {
      this.pagination.page = 1
      this.queryParam.RpcMerId = this.scheme.RpcMerId
      this.queryParam.SystemTypeId = this.scheme.SystemTypeId
      this.queryParam.SchemeId = this.scheme.Id
      this.queryParam.RegionId = null
      this.queryParam.QueryKey = null
      this.loadTable()
    },
    indexMethod(index) {
      return index + 1 + (this.pagination.page - 1) * this.pagination.size
    },
    pagingChange(index) {
      this.pagination.page = index
      this.loadTable()
    },
    search() {
      this.loadTable()
    },
    sortChange(e) {
      this.pagination.order = e.order
      this.pagination.sort = e.prop
      this.loadTable()
    },
    async loadRegion() {
      if (this.region.length === 0) {
        this.region = await GetList()
      }
    },
    async loadTable() {
      this.isLoad = true
      const res = await transmitApi.Query(this.queryParam, this.pagination)
      res.List.forEach(c => {
        c.TransmitList = []
        if (c.TransmitId !== 0 && c.Transmits) {
          c.Transmits.forEach(a => {
            if (this.scheme.TransmitType === 4) {
              c.TransmitList.push('固定值：' + a.value)
            } else if (a.Range && a.Range.length > 0) {
              a.Range.forEach(b => {
                if (b.IsFixed) {
                  c.TransmitList.push('固定值：' + b.BeginRange)
                } else {
                  c.TransmitList.push('范围值：' + b.BeginRange + '-' + b.EndRange)
                }
              })
            }
          })
          delete c.Transmits
        }
      })
      console.log(res.List)
      this.serverList = res.List
      this.pagination.total = res.Count
    }
  }
}
</script>

  <style lang="scss" scoped>
  .chiose-server {
    line-height: 50px;
    height: 50px;
    width: 100%;
    display: inline-block;
    .title {
      padding-right: 15px;
    }
    .el-tag {
      margin-right: 10px;
    }
  }
  </style>
